<template>
  <div class="body">
    <div class="backoff">
      <div>
        <el-button class="anniu" @click="cionfan">返回</el-button>
      </div>
    </div>
    <el-tabs v-if="!xiang" class="tac" tab-position="left">
      <el-tab-pane style="" class="body" label="系统通知">
        <el-menu
          background-color="#F5F6FA"
          active-text-color="#1795FF"
          text-color="#333333 "
          class="el-menu-demo"
          mode="horizontal"
        >
          <el-menu-item @click="companylist(0)" index="1"
            >系统消息</el-menu-item
          >
          <!-- <el-menu-item @click="companylist(1)" index="2"
            >短信提醒</el-menu-item
          > -->
        </el-menu>
        <el-row class="mb8">
          <el-col :span="18">
            <el-button
              @click="shuaxin"
              type="info"
              icon="el-icon-refresh-right"
            ></el-button>
          </el-col>
          <el-col :span="6" class="seach">
            <el-input
              v-model="params.keyWrod"
              placeholder="请输入关键字"
            ></el-input>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="seach"
            ></el-button>
          </el-col>
        </el-row>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          class="table"
          @selection-change="handleSelectionChange"
          height="100%"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column align="center" label="序号" width="50" prop="id">
          </el-table-column>
          <el-table-column
            align="center"
            prop="meCode"
            label="消息编号"
            width="220"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="title"
            label="消息标题"
            width="220"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="content"
            label="消息内容"
            width="220"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="type"
            label="消息类型"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <!-- 消息类型 system 系统消息 sms 短信消息 -->
              <span v-show="scope.row.type == 1">系统消息</span>
              <span v-show="scope.row.type == 2">短信消息</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="type"
            label="接收人类型"
            width="180"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <!-- 消息类型 system 系统消息 sms 短信消息 -->
              <span v-show="scope.row.jsType == 1">申请方</span>
              <span v-show="scope.row.jsType == 2">出函方</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="jsName"
            label="接收人姓名"
            width="180"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="type"
            label="发送人类型"
            width="180"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <!-- 消息类型 system 系统消息 sms 短信消息 -->
              <span v-show="scope.row.fsType == 1">申请方</span>
              <span v-show="scope.row.fsType == 2">出函方</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="fsName"
            align="center"
            label="发送人"
            width="220"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="fsTime"
            label="发送时间"
            width="220"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span v-show="scope.row.fsTime == null"></span>
              <span v-show="scope.row.fsTime != null">{{
                scope.row.fsTime | dateFormat
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="ckTime"
            label="查看时间"
            width="220"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span v-show="scope.row.ckTime == null">未查看</span>
              <span v-show="scope.row.ckTime != null">{{
                scope.row.ckTime | dateFormat
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="status"
            label="状态"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <!-- 是否已查看 0:未查看 1:已查看 -->
              <span v-show="scope.row.state == 1">未查看</span>
              <span v-show="scope.row.state == 2">已查看</span>
              <span v-show="scope.row.state == 3">已删除</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button
                @click="handleClicks(scope.row)"
                type="text"
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30]"
            :page-size="params.pageSize"
            :current-page="params.pageNum"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-tabs v-else class="tac" tab-position="left">
      <el-tab-pane style="" class="body" label="消息详情">
        <el-form
          :model="formdata"
          label-width="170px"
          :disabled="true"
          class="fromsBox"
        >
          <el-form-item label="消息编号 :">
            <el-input v-model="formdata.meCode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="发送人 :">
            <el-input v-model="formdata.fsName" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="发送人类型 :">
            <el-input
              v-if="formdata.fsType == 1"
              value="申请方"
              autocomplete="off"
            ></el-input>
            <el-input v-else value="出函方" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="接收人姓名:">
            <el-input v-model="formdata.jsName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="接收人类型:">
            <el-input
              v-if="formdata.jsType == 1"
              value="申请方"
              autocomplete="off"
            ></el-input>
            <el-input v-else value="出函方" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="消息标题:">
            <el-input v-model="formdata.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="消息内容:">
            <el-input
              v-model="formdata.content"
              type="textarea"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="消息类型:">
            <el-input
              v-if="formdata.type == 1"
              value="系统消息"
              autocomplete="off"
            ></el-input>
            <el-input v-else value="短信消息" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="发送时间:">
            <el-input
              :value="formdata.fs_time | dateFormat"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item v-show="formdata.state == 2" label="查看时间:">
            <el-input
              :value="formdata.ckTime | dateFormat"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态:">
            <!-- "state": 2, //保函状态，0：申请中，1：审核中，2：审核通过，3：审核不通过 -->
            <el-input
              v-show="formdata.state == 1"
              value="未查看"
              autocomplete="off"
            ></el-input>
            <el-input
              v-show="formdata.state == 2"
              value="已查看"
              autocomplete="off"
            ></el-input>
            <el-input
              v-show="formdata.state == 3"
              value="已删除"
              autocomplete="off"
            ></el-input>
            <!-- <el-input v-show="formdata.state == 3" value="审核不通过" autocomplete="off"></el-input> -->
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { homepage, list, messageDel } from "@/api/homepage";
export default {
  data() {
    return {
      // 不合格原因参数
      unqualified: "",
      xieyi_file: "",
      faren_file: "",
      zhenshi_file: "",
      ziliao: [],
      state: null,
      step: null,
      activeIndex: "1",
      title: "分配",
      dfp: true,
      dsh: false,
      lasd: {
        offset: 0,
        limit: 10,
        keywords: "",
        user_id: "",
        gtype: "投标保函",
        zhuangtai: 1, //待分配 2待审核
      },
      total: null,
      total1: null,
      shenhe: {
        company_id: "", //审核
        name: "", //步骤
        value: "", //状态值
        user_id: "",
        sendcode: "", //发货单号（当name=e,value=1时必传）
        sendkuaidi: "", //发货快递（当name=e,value=1时必传）
        send_id: "", //发货人编号（当name=e,value=1时必传）
        sender: "", //发货人（当name=e,value=1时必传）
        sendaddress: "", //发货地址（当name=e,value=1时必传）
        get_id: "", //收货人id（当name=e,value=1时必传）
        geter: "", //收货人姓名（当name=e,value=1时必传）
        getaddress: "", //收货地址（当name=e,value=1时必传）
      },
      lasds: {
        offset: 0,
        limit: 10,
        keywords: "",
        user_id: "",
        gtype: "投标保函",
        // zhuangtai: 2, //待分配 2待审核
      },
      current: null,
      current1: null,
      open: false,
      opens: false,
      formLabelAlign: {},
      tableData: [],
      tableDatas: [],
      formasd: {
        company_id: "", //保函id
        person_id: "", //分配人id
        person_name: "", //分批人姓名
      },
      rules: {},
      form: {
        name1: "",
        deptname123: "",
        name2: "",
        name3: "",
        dept: "",
        user_id: "",
        id: "",
        deptname: "",
        username: "",
        nickname: "",
        cardname: "",
        password: "",
        email: "",
        mobile: "",
      },
      options1: [], //选择部门
      options2: [], //选择职位
      options3: [], //选择小组
      options4: [], //选择分配人
      multipleSelection: [],
      opendsh: false, //daishenhe
      formData: {},
      rules: {
        field126: [
          {
            required: true,
            message: "请输入抵押人：",
            trigger: "blur",
          },
        ],
        field127: [
          {
            required: true,
            message: "请输入出质人：",
            trigger: "blur",
          },
        ],
        field128: [
          {
            required: true,
            message: "请输入反担保人：",
            trigger: "blur",
          },
        ],
        field136: [
          {
            required: true,
            message: "请输入反担保人姓名：",
            trigger: "blur",
          },
        ],
        field137: [
          {
            required: true,
            message: "请输入联系电话：",
            trigger: "blur",
          },
        ],
        field138: [
          {
            required: true,
            message: "请输入身份证号码：",
            trigger: "blur",
          },
        ],
        field139: [
          {
            required: true,
            message: "请输入验证码：",
            trigger: "blur",
          },
        ],
      },
      e: "",
      i: "",
      open_buhege: false,

      pay_detail: {},
      kuaidi_detail: {},
      enclosure_detail: {},
      steps: 0,
      apply_number: "",
      params: {
        keyWrod: "",
        pageNum: 1,
        pageSize: 10,
      },
      xiang: false,
      formdata: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    shuaxin() {
      this.getList();
    },
    // 通知列表
    getList() {
      list({ ...this.params }).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.tableData = res.data.rows;
          this.total = res.data.total;
        }
      });
    },
    companylist(num) {
      if (num == 0) {
        this.params.type = "system ";
      } else {
        this.params.type = "sms ";
      }
      this.params.pageNum = 1;
      this.params.pageSize = 10;
      this.getList();
    },
    handleClick(e) {
      console.log(e);
      homepage({ me_code: e.me_code }).then((res) => {
        if (res.data.code == 1) {
          // this.$message({
          //   type: "success",
          //   message: "删除成功!",
          // });
          this.formdata = e;
          // this.formdata.ck_time=this.dateFormat(this.formdata.ck_time)
          // this.formdata.fs_time=this.dateFormat(this.formdata.fs_time)
          this.xiang = true;
          this.getList();
        }
      });
    },
    handleClicks(e) {
      var taht = this;
      console.log(e);
      this.$confirm("此操作将删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          messageDel({ me_code: e.me_code }).then((res) => {
            if (res.data.code == 1) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.pageNum = val;
      this.getList();
    },
    // 搜索
    seach() {
      this.params.pageNum = 1;
      this.params.pageSize = 10;
      this.getList();
    },
    cionfan() {
      if (this.xiang) {
        this.xiang = false;
      } else {
        this.$router.go(-1);
      }
    },
    format(shijianchuo) {
      if (shijianchuo == 0) {
        return "";
      }
      var date = new Date(shijianchuo * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
  },
};
</script>

<style scoped lang="scss">
.showphoto {
  margin-bottom: 30px;
}
.el-tabs--left .el-tabs__item.is-active {
  background: #1795ff;
  color: #fff;
}
.body {
  height: calc(90vh - 60px);
  display: flex;
  flex-direction: column;
}

.agreement {
  margin-bottom: 30px;
}

.froms {
  margin: 0 auto;
}

.table {
  width: 100%;
  // margin-top: 10px;
}

.block {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding-top: 0 !important;
  padding-bottom: 10px;
}

/* element.style{
    flex-wrap: wrap;
  } */
.EP_pdf_box {
  width: 335px;
  height: 140px;
  background: #ffffff;
  box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 16%);
  border-radius: 4px 4px 4px 4px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tac {
  flex: 1;
}
.EP_PDF_IMG_LEFT {
  display: flex;
  /* justify-content: center; */
  align-items: center;
}

.yesform {
  flex: 1;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.button_details {
  width: 100%;
  display: flex;
  justify-content: center;
}

.casd {
  flex: 1;
}

.el-menu--horizontal > .el-menu-item {
  height: 40px;
  line-height: 40px;
}

.el-menu.el-menu--horizontal {
  margin-bottom: 8px;
}
.backoff {
  position: absolute;
  z-index: 999;
  left: 222px;
  top: 0;
  // top: 83px;
  // margin-left: 180px;
  display: flex;
  justify-content: flex-end;
  padding: 5px 0;
  box-sizing: border-box;
  height: 0;
  div {
    width: calc(100vw - 240px);
    display: flex;

    justify-content: flex-end;
    padding-right: 20px;
  }

  .el-button {
    height: 40px;
    border: 1px solid;
  }
}
.fromsBox {
  overflow: auto;
  padding: 10px;
}
</style>
